<template>

  <div class="tab-bar-item" @click="itemCilck">
        <div v-if="!isDON"><slot  name="item-icon"></slot></div>
        <div v-else><slot  name="item-icon-active"></slot></div>
        <div :style="activestyle"> <slot name="item-text" ></slot></div> 
  </div>

</template>

<script>
export default {
    name:"TabBarItme",
    props:{
        path:String,

        activeColor:{
            type:String,
            default:'red'
        }
    },
    data() {
        return {
            // isDON:false
        }
    },
    computed:{
        isDON(){
            return this.$route.path.indexOf(this.path)!==-1
        },
        activestyle(){
            return this.isDON ? {color: this.activeColor} : {}
        }
    }
    ,
    methods:{
        itemCilck(){
            this.$router.push(this.path)
        }
    },

}
</script>

<style>
/* .acive{
    color: rgb(0, 0, 0);
} */
.tab-bar-item{
    color: rgb(121, 116, 116);
}
  .tab-bar-item{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    flex: 1;
    text-align: center;
    height: 49px;
    line-height: 20px;
    
  }
  .tab-bar-item img{
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 20px;
    height: 20px;

  }
  /* .tab-bar-item div{
      padding-bottom: 10px;
  } */
</style>